<template>
  <div class="demo-content">
    <el-form :model="formData" :rules="rules" ref="ruleFormRef" label-width="100px" status-icon>
      <el-form-item label="按钮尺寸">
        <el-button size="small">按钮一</el-button>
        <el-button size="medium">按钮二</el-button>
        <el-button size="large">按钮三</el-button>
      </el-form-item>
      <el-form-item label="按钮类型">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="default">次要按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="text">文字按钮</el-button>
        <el-button type="primary" :icon="Search" @click="submitForm(ruleFormRef)">图标按钮</el-button>
      </el-form-item>
      <el-form-item label="按钮状态">
        <el-button type="primary">悬停按钮</el-button>
        <el-button type="primary">激活按钮</el-button>
        <el-button type="primary" :disabled="true">禁用按钮</el-button>
        <el-button type="primary" loading>加载中...</el-button>
        <el-button class="unclickable-button">不可点击按钮</el-button>
      </el-form-item>
      <el-form-item label="输入框尺寸" prop="input1">
        <el-input v-model="formData.input1" placeholder="中尺寸-请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="输入框尺寸" prop="input2">
        <el-input v-model="formData.input2" size="large" placeholder="大尺寸-请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="选择器尺寸" prop="selectedValue1">
        <el-select v-model="formData.selectedValue1" clearable size="medium" placeholder="中尺寸-请选择">
          <el-option label="选项1" :value="1"></el-option>
          <el-option label="选项2" :value="2"></el-option>
          <el-option label="选项3" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择器尺寸" prop="selectedValue2">
        <el-select v-model="formData.selectedValue2" clearable size="large" placeholder="大尺寸尺寸-请选择">
          <el-option label="选项-1" :value="-1"></el-option>
          <el-option label="选项-2" :value="2"></el-option>
          <el-option label="选项-3" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期选择器" prop="dateValue1">
        <el-date-picker v-model="formData.dateValue1" clearable type="date" size="medium" placeholder="请选择日期" />
      </el-form-item>
      <el-form-item label="日期选择器" prop="dateValue2">
        <el-date-picker v-model="formData.dateValue2" clearable type="date" size="large" placeholder="请选择日期" />
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="地址">
        <el-table-column prop="address.province" label="省"></el-table-column>
        <el-table-column prop="address.city" label="市"></el-table-column>
        <el-table-column prop="address.district" label="区"></el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination background :current-page="pageObj.pageNumber" :page-size="pageObj.pageSize" :total="pageObj.total"
      layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />

    <el-table :data="tableData2" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="地址">
        <el-table-column prop="address.province" label="省"></el-table-column>
        <el-table-column prop="address.city" label="市"></el-table-column>
        <el-table-column prop="address.district" label="区"></el-table-column>
      </el-table-column>
    </el-table>
    <div>
      <!-- 大标签示例（主功能切换） -->
      <el-tabs v-model="activeTab" size="large">
        <el-tab-pane name="1" label="主功能 1">内容 1</el-tab-pane>
        <el-tab-pane name="2" label="主功能 2">内容 2</el-tab-pane>
        <el-tab-pane name="3" label="主功能 3">内容 3</el-tab-pane>
      </el-tabs>
      <el-divider />
      <!-- 小标签示例（辅助功能切换） -->
      <el-tabs v-model="activeTab" size="small" type="border-card">
        <el-tab-pane name="1" label="辅助功能 1">内容 1</el-tab-pane>
        <el-tab-pane name="2" label="辅助功能 2">内容 2</el-tab-pane>
        <el-tab-pane name="3" label="辅助功能 3">内容 3</el-tab-pane>
      </el-tabs>
      <el-divider />
      <el-tabs v-model="activeTab" size="small" type="card">
        <el-tab-pane name="1" label="辅助功能 1">内容 1</el-tab-pane>
        <el-tab-pane name="2" label="辅助功能 2">内容 2</el-tab-pane>
        <el-tab-pane name="3" label="辅助功能 3">内容 3</el-tab-pane>
      </el-tabs>
    </div>
    <el-divider />
    <div>
      <!-- 带顺序的时间轴 -->
      <el-timeline>
        <el-timeline-item v-for="(item, index) in timelineData" :key="index" :timestamp="item.timestamp"
          :color="item.color" :type="item.type">
          <div>{{ item.description }}</div>
          <div>{{ item.tips }}</div>
        </el-timeline-item>
      </el-timeline>
      <el-divider />
      <!-- 不带顺序的时间轴 -->
      <el-timeline :reverse="true">
        <el-timeline-item v-for="(item, index) in timelineData" :key="index" :timestamp="item.timestamp"
          :color="item.color" :type="item.type" :icon="item.icon">
          <div>{{ item.description }}</div>
          <div>{{ item.tips }}</div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: {
      province: '上海',
      city: '上海',
      district: '浦东新区',
    },

  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: {
      province: '山东省',
      city: '青岛市',
      district: '市北区',
    },
  },
])
const tableData2 = ref([])
const formData = ref({
  input1: '',
  input2: '',
  selectedValue1: '',
  selectedValue2: '',
  dateValue1: '',
  dateValue2: '',
})
const rules = ref({
  input1: [
    { required: true, message: '请输入内容', trigger: 'blur' },
  ],
  input2: [
    { required: true, message: '请输入内容', trigger: 'blur' },
  ],
  selectedValue1: [
    { required: true, message: '请选择', trigger: 'change' },
    { type: 'number', min: 1, message: '请选择大于1的值', trigger: 'change' },
  ],
  selectedValue2: [
    { required: true, message: '请选择', trigger: 'change' },
    { type: 'number', min: 2, message: '请选择大于2的值', trigger: 'change' },
  ],
  dateValue1: [
    { required: true, message: '请选择日期', trigger: 'change' },
  ],
  dateValue2: [
    { required: true, message: '请选择日期', trigger: 'change' },
  ],
})
const activeTab = ref('1') // 当前状态
const pageObj = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 100,
})
const handleCurrentChange = (val) => {
  pageObj.value.pageNumber = val
}
const handleSizeChange = (val) => {
  pageObj.value.pageSize = val
}
const ruleFormRef = ref()
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 时间轴数据
const timelineData = ref([
  {
    timestamp: '2024-01-01 12:00',
    description: '任务完成',
    color: 'green', // 已完成
    type: 'success', // 成功状态
    icon: 'el-icon-check', // 图标
    tips: '任务完成，请确认',
  },
  {
    timestamp: '2024-02-01 15:00',
    description: '发生警告',
    color: 'red', // 错误/警告
    type: 'warning', // 警告状态
    icon: 'el-icon-warning',
    tips: '任务发生警告，请及时处理',
  },
  {
    timestamp: '2024-03-01 18:00',
    description: '任务进行中',
    color: 'blue', // 进行中
    type: 'primary', // 默认状态
    icon: 'el-icon-loading',
    tips: '任务进行中，请耐心等待',
  },
  {
    timestamp: '2024-04-01 20:00',
    description: '任务失效',
    color: 'gray', // 失效
    type: 'info', // 未完成状态
    icon: 'el-icon-delete',
    tips: '任务失效，请重新开始',
  },
])
</script>

<style lang="scss" scoped>
.demo-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
